<template>
  <el-dialog
    :append-to-body="true"
    @close="closeDialog"
    :visible.sync="dialog"
    
    title="修改密码"
    width="500px"
  >
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
      <el-form-item label="原密码" prop="password" class="position-re">
        <el-input placeholder="请输入原密码" :type="is1?'text':'password'" v-model="form.password" maxlength="20" />
        <i
          v-if="0"
          class="el-icon-view fz30 position-ab pointer"
          @click="is1=!is1"
          :class="{isopen:is1}"
          style="top:0;right:10px"
        ></i>
      </el-form-item>
      <el-form-item label="新密码" prop="password1" class="position-re">
        <el-input placeholder="请输入新密码" :type="is2?'text':'password'" v-model="form.password1" maxlength="20" />
        <i
          v-if="0"
          class="el-icon-view fz30 position-ab pointer"
          @click="is2=!is2"
          :class="{isopen:is2}"
          style="top:0;right:10px"
        ></i>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2" class="position-re">
        <el-input placeholder="请确认密码" :type="is2?'text':'password'" v-model="form.password2" maxlength="20" />
        <i
          v-if="0"
          class="el-icon-view fz30 position-ab pointer"
          @click="is2=!is2"
          :class="{isopen:is2}"
          style="top:0;right:10px"
        ></i>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _userUpdatePass} from "@/http/ajax";
import * as MDZZ from "@/http/reg";
export default {
  name: "pass",
  props: {
    cur_this: {
      type: Object,
      required: null
    }
  },
  data() {
     const validPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (!MDZZ.shuziyingwen(value)) {
        callback(new Error("密码格式不对（只能是数字、字母组成）"));
      } else {
        callback();
      }
    };
     const validPass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (!MDZZ.shuziyingwen(value)) {
        callback(new Error("密码格式不对（只能是数字、字母组成）"));
      } else if(this.form.password1!=this.form.password2){
        callback(new Error("两次密码不一样"));
      }else{
        callback();
      }
    };
    return {
      dialog: false,
      loading: false,
      is1: false,
      is2: false,
      form: { password: "", password1: "",password2: "" },
      rules: {
        password: [{ required: true, validator: validPass, trigger: "blur" }],
        password1: [{ required: true, validator: validPass, trigger: "blur" }],
        password2: [{ required: true, validator: validPass2, trigger: "blur" }]
      }
    };
  },
  created() {},
  methods: {
    doSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          let data = {
            password: this.form.password2,
            password_old: this.form.password,
            phone: JSON.parse(sessionStorage.user).phone
          };
          _userUpdatePass(
            data,
            res => {
              this.dialog = false;
              this.loading = false;
              this.$router.push("/login");
            },
            err => {  this.loading = false;}
          );
        }
      });
    },
    closeDialog() {
      this.form = { password: "", password1: "" };
    }
  }
};
</script>

<style lang="scss">
.isopen {
  color: blue;
}
</style>
